<template>
  <div class="Tabbar-box">
    <van-tabbar
      class="_van-tabbar"
      route
      v-model="active"
      fixed
      active-color="#009065"
      inactive-color="#666"
    >
      <van-tabbar-item v-for="item in tabIconList" :key="item.to" :to="item.to">
        <span class="_tabbar_title">{{ item.text }}</span>
        <template #icon="props">
          <img class="_img" :src="props.active ? item.url_1 : item.url_0" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { changeImgUrl } from '@/utils/tools'
import { useUserInfoStore } from '@/stores'
import { ref, reactive, computed } from 'vue'
const active = ref(0)
const userInfoStore = useUserInfoStore()

/** tab栏的png */
const allIconList = reactive({
  customerService: [
    {
      url_0: changeImgUrl('machine_0'),
      url_1: changeImgUrl('machine_1'),
      to: '/machine',
      text: '设备管理',
    },
    {
      url_0: changeImgUrl('alarm_0'),
      url_1: changeImgUrl('alarm_1'),
      to: '/alarm',
      text: '报警管理',
    },
    {
      url_0: changeImgUrl('machineData_0'),
      url_1: changeImgUrl('machineData_1'),
      to: '/machineData',
      text: '数据管理',
    },
  ],
  investor: [
    {
      url_0: changeImgUrl('machine_0'),
      url_1: changeImgUrl('machine_1'),
      to: '/ivestorMachine',
      text: '设备详情',
    },
    {
      url_0: changeImgUrl('machineData_0'),
      url_1: changeImgUrl('machineData_1'),
      to: '/ivestorTradingData',
      text: '交易数据',
    },
    {
      url_0: changeImgUrl('my_0'),
      url_1: changeImgUrl('my_1'),
      to: '/ivestorMy',
      text: '我的',
    },
  ],
})

const tabIconList = computed(() => {
  // console.log(allIconList[userInfoStore.userInfo.userType])

  return userInfoStore.userInfo.userType.includes('investor')
    ? allIconList['investor']
    : allIconList['customerService']
})
</script>

<style lang="scss" scoped>
.Tabbar-box {
  height: 100px;
}
._van-tabbar {
  height: 72px;
}
._img {
  width: 26px;
  height: 26px;
}
._tabbar_title {
  font-size: var(--fs12);
}
</style>
